<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="jquery-1.11.0.min.js"></script>
</head>

<body>

    <div id="app">
        <!-- <input type="button" value="get请求" @click="getCart"> -->
        <table border="1">
            <tr v-for="cart in carts">
                <td>{{cart.id}}</td>
                <td>{{cart.goodsName}}</td>
                <!-- 实现数量加减 -->
                <td>
                    <button @click="subNum(cart)">-</button> {{cart.nums}}
                    <button @click="addNum(cart)">+</button>
                </td>
                <td>{{cart.price}}</td>
                <td>{{cart.nums*cart.price}}</td>
                <!-- 使用计算属性的方式传参  暂时不能实现-->
                <!-- <td>{{smTotal}}</td> -->
            </tr>
        </table>
        <p>总价{{total}}</p>
    </div>
    <script>
        //将ajax封装到对象属性中    原型方法    
        Vue.prototype.send = function(url) {
            let res = null;
            $.ajax({
                url: url,
                type: "post",
                async: false, //同步    后面会学习发请求的配套插件
                cache: false,
                success: function(result) {
                    console.log(result);
                    res = result;
                }
            });
            return res; //null先返回了，然后数据才回来
        }

        Vue.prototype.getData = function(url) {
            let xhr = new XMLHttpRequest();
            xhr.open("GET", url, false); //false 设置不异步 也就是同步
            //设置回调：当请求数据时
            if (xhr.onreadystatechange == 4 && xhr.status == 200) {
                return xhr.responseText; //得到返回的文本
            }
            //发送请求
            xhr.send();
        }


        //创建Vue对象
        new Vue({
            el: "#app",
            data: {
                carts: null, //查看购物车数据
                total: 0 //总价
            },
            //挂载完毕 加载数据
            mounted() {

                let result = this.send("http://localhost:8080/cart/all");
                console.log(result);
                // 将数据赋值给carts
                this.carts = result;

            },
            methods: {

                //将cart作为参数传进方法中
                subNum: function(cart) {
                    cart.nums--;

                },
                addNum: function(cart) {
                    cart.nums++;
                }

            },
            //使用监听器，监听购物车数量发生变化
            watch: {
                carts: {
                    handler(val, oldvar) {
                        // 重新计算总价
                        let total = 0;
                        for (const cart of this.carts) {
                            total = total + cart.nums * cart.price;
                        }
                        this.total = total;
                    },
                    deep: true
                }
            }
            //计算属性
            // computed: {
            //     // smTotal: function(cart) {
            //     //     return cart.nums * cart.price;
            //     // }
            //     smTotal: {
            //         get() { //计算属性的getter方法
            //             console.log("getter")
            //         },
            //         set() { //计算属性的setter方法
            //             console.log("setter")
            //         }
            //     }
            // }

        });
    </script>
</body>

</html>